<template>
  <div
    class="app-container"
    v-loading="importLoading"
    element-loading-text="正在上传中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="案件号" prop="case_number">
        <el-input
          v-model="queryParams.case_number"
          placeholder="请输入案件号"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <!-- <el-form-item label="客户全称" prop="company_name">
        <el-select
          v-model="queryParams.company_name"
          placeholder="请选择客户全称"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in customerOptions"
            :key="index"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="案件类型" prop="case_type">
        <el-select
          v-model="queryParams.case_type"
          placeholder="请选择案件类型"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in caseTypeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域" prop="addressCode">
        <el-cascader
          v-model="queryParams.addressCode"
          placeholder="请选择省市区"
          :options="options"
          ref="classifyRef"
          clearable
          @change="handleChange"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="accident_address">
        <el-input
          v-model="queryParams.accident_address"
          placeholder="请输入详细地址"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="车牌号" prop="car_number">
        <el-input
          v-model="queryParams.car_number"
          placeholder="请输入车牌号"
        ></el-input>
      </el-form-item>
      <el-form-item label="接单时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 220px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="查勘员" prop="surveyer">
        <el-input
          v-model="queryParams.surveyer"
          placeholder="请输入查勘员"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否中标" prop="is_bidder">
        <el-select
          v-model="queryParams.is_bidder"
          placeholder="请选择是否中标"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in whetherList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否维修" prop="is_repair">
        <el-select
          v-model="queryParams.is_repair"
          placeholder="请选择是否维修"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in whetherList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="案件状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择案件状态"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in caseStatusOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:caseManagement:add']"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          v-hasPermi="['system:caseManagement:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          v-hasPermi="['system:caseManagement:remove']"
          >删除</el-button
        >
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['system:caseManagement:export']"
          >导出</el-button
        >
      </el-col> -->

      <el-col :span="1.5">
        <el-upload
          ref="upload"
          :before-upload="handleImport"
          :on-success="handleImportSuccess"
          :limit="1"
          accept=".xls,.xlsx"
          :action="importUrl"
          :headers="importHeaders"
          :show-file-list="false"
        >
          <el-button
            v-hasPermi="['system:caseManagement:import']"
            type="info"
            plain
            icon="el-icon-upload"
            size="mini"
            >案件导入</el-button
          >
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:caseManagement:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="caseList" height="600">
      <!-- <el-table-column width="55" align="center" /> -->
      <el-table-column label="主键id" align="center" prop="id" v-if="false" />
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column
        label="案件号"
        align="center"
        width="120px"
        prop="case_number"
      />
      <el-table-column
        label="保险公司"
        :show-overflow-tooltip="true"
        align="center"
        prop="company_name"
      />
      <el-table-column label="案件类型" align="center" prop="case_type">
        <template slot-scope="scope">
          {{ getCaseTypeLabel(scope.row.case_type) }}
        </template>
      </el-table-column>
      <el-table-column label="车牌号" align="center" prop="car_number" width="90px"/>
      <el-table-column
        label="事故地址"
        align="center"
        prop="region"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="损失项目" align="center" prop="loss_items" />
      <el-table-column label="查勘员" align="center" prop="surveyer" />
      <el-table-column label="是否维修" align="center" prop="is_repair">
        <template slot-scope="scope">
          {{
            scope.row.is_repair === 0
              ? "否"
              : scope.row.is_repair === 1
              ? "是"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="物损方报价"
        align="center"
        prop="damage_customer_price"
      />
      <el-table-column label="我司竞标价格" align="center" prop="bid_price" />
      <el-table-column label="是否中标" align="center" prop="is_bidder">
        <template slot-scope="scope">
          {{
            scope.row.is_bidder === 0
              ? "否"
              : scope.row.is_bidder === 1
              ? "是"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="保险核损价格"
        align="center"
        prop="write_off_price"
      />
      <el-table-column label="案件成本" align="center" prop="case_cost" />
      <el-table-column label="业务费" align="center" prop="operation_cost" />
      <el-table-column label="毛利润" align="center" prop="gross_profit" />
      <el-table-column label="接单时间" align="center" prop="receiving_time" />
      <el-table-column label="到账时间" align="center" prop="receipt_time" />
      <el-table-column
        label="维修款支付"
        width="60px"
        align="center"
        prop="payment_stu"
      />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          {{ getStatusLabel(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="查勘老师" align="center" prop="survey_teacher" />
      <el-table-column
        label="物损方及电话"
        align="center"
        prop="damage_customer"
      />
      <el-table-column
        label="维修收款信息"
        align="center"
        prop="repair_payment"
      />
      <el-table-column
        label="维修收款人电话"
        align="center"
        prop="recipient_phone"
      />
      <el-table-column
        label="是否开票及发票号码"
        align="center"
        prop="invoicing"
      />
      <el-table-column label="备注" align="center" prop="describe" />
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.status === 1">
            <el-popconfirm
              confirm-button-text="通过"
              cancel-button-text="不通过"
              :ref="`popover-${scope.$index}`"
              :title="`确定提交【${scope.row.case_number}】案件吗？`"
              @confirm="confirmAuditing(scope.row)"
              @cancel="cancelAuditing(scope.row)"
              >s
              <el-link
                style="margin: 6px; font-size: 12px"
                type="primary"
                slot="reference"
                icon="el-icon-share"
                :underline="false"
                >提交审核</el-link
              >
            </el-popconfirm>
          </template>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:caseManagement:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:caseManagement:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <edit
      :visible="editVisible"
      :formData="editData"
      :isEdit="isEdit"
      @onClose="editClose"
      @onEnter="editEnter"
      ref="editRef"
    />
  </div>
</template>
<script>
import Edit from "./Edit";
import { regionData } from "element-china-area-data";
import {
  caseManagementList,
  addCaseManagement,
  updateCaseManagement,
  deleteCaseManagement,
} from "@/api/system/caseManage";
import { getToken } from "@/utils/auth";
import { BASE_URL } from "@/utils/request";
export default {
  components: { Edit },
  props: [],
  data() {
    return {
      importUrl:process.env.VUE_APP_BASE_API + "/case_management/importDataCase",
      // importUrl: BASE_URL + "/case_management/importDataCase",
      importHeaders: {
        Authorization: "Bearer " + getToken(),
      },
      importLoading: false,
      editVisible: false,
      editData: {},
      isEdit: false,
      showSearch: true,
      loading: true,
      caseList: [],
      dateRange: [],
      total: 0,
      queryParams: {
        case_number: undefined,
        case_type: undefined,
        addressCode: undefined,
        // company_name: undefined,
        surveyer: undefined,
        accident_address: undefined,
        car_number: undefined,
        is_bidder: undefined,
        is_repair: undefined,
        status: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      options: regionData,
      areaNames: [],
      customerOptions: [],
      caseTypeOptions: [],
      caseStatusOptions: [],
      whetherList: [
        { label: "是", value: 1 },
        { label: "否", value: 0 },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
    this.getCustomer();
    this.getSurveyStatus();
    this.getCaseType();
  },
  mounted() {},
  methods: {
    handleExport() {
      this.download(
        "case_management/exportCase",
        {
          ...this.queryParams,
        },
        `案件登记表_${new Date().getTime()}.xlsx`
      );
    },
    getCaseTypeLabel(value) {
      const item = this.caseTypeOptions.find(
        (option) => option.value === value
      );
      return item ? item.label : "";
    },
    getStatusLabel(value) {
      const item = this.caseStatusOptions.find(
        (option) => option.value === value
      );
      return item ? item.label : "";
    },
    handleImport() {
      this.importLoading = true;
    },
    handleImportSuccess(res, file) {
      if (res.code == 200) {
        this.$refs.upload.clearFiles();
        this.importLoading = false;
        this.getList();
        this.$message.success("导入成功");
      } else {
        this.$refs.upload.clearFiles();
        this.importLoading = false;
        this.$message.error(res.msg);
      }
    },
    handleChange(e) {
      if (e.length === 0) {
        delete this.queryParams.province;
        delete this.queryParams.city;
        delete this.queryParams.area;
      }
      if (this.$refs.classifyRef) {
        this.$refs.classifyRef.dropDownVisible = false;
      }
      this.areaNames = e
        .map((code) => this.findAreaByCode(code, this.options).label)
        .filter(Boolean);
      if (this.areaNames.length === 1) {
        this.queryParams.province = this.areaNames[0];
        delete this.queryParams.city;
        delete this.queryParams.area;
      } else if (this.areaNames.length === 2) {
        this.queryParams.city = this.areaNames[1];
        delete this.queryParams.province;
        delete this.queryParams.area;
      } else if (this.areaNames.length === 3) {
        this.queryParams.area = this.areaNames[2];
        delete this.queryParams.province;
        delete this.queryParams.city;
      }
    },
    findAreaByCode(code, options) {
      const found = options.find((option) => option.value === code);
      if (found) return found;
      for (const option of options) {
        if (option.children) {
          const childFound = this.findAreaByCode(code, option.children);
          if (childFound) return childFound;
        }
      }
      return null;
    },
    handleAdd() {
      this.isEdit = false;
      this.$refs.editRef.editType = false;
      this.editVisible = true;
    },
    getCaseType() {
      this.caseTypeOptions = [
        { label: "工程机械类", value: 1 },
        { label: "房屋建筑类", value: 2 },
        { label: "道路设施类", value: 3 },
        { label: "电力/通讯设施类", value: 4 },
        { label: "园林绿化类", value: 5 },
        { label: "庄稼食品类", value: 6 },
        { label: "电器设备类", value: 7 },
        { label: "财产险物损类", value: 8 },
      ];
    },
    getCustomer() {
      this.customerOptions = [
        {
          label: "中国平安财产保险股份有限公司",
          value: 1,
        },
        {
          label: "中国人民财产保险公司",
          value: 2,
        },
        {
          label: "国元农业保险股份有限公司",
          value: 3,
        },
      ];
    },
    getSurveyStatus() {
      this.caseStatusOptions = [
        {
          label: "案件废弃",
          value: 0,
        },
        {
          label: "已结案",
          value: 1,
        },
        {
          label: "查勘阶段",
          value: 2,
        },
        {
          label: "定损阶段",
          value: 3,
        },
        {
          label: "核损阶段",
          value: 4,
        },
        {
          label: "维修阶段",
          value: 5,
        },
      ];
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      delete this.queryParams.province;
      delete this.queryParams.city;
      delete this.queryParams.area;
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      caseManagementList(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((res) => {
        this.caseList = res.data.list;
        this.caseList = this.caseList.map((e) => ({ ...e, region: "" }));
        this.caseList.forEach((e) => {
          const province = e.province || "";
          const city = e.city || "";
          const area = e.area || "";
          const accident_address = e.accident_address || "";
          e.region = (province + city + area + accident_address) || "暂无";
        });
        this.total = res.data.total;
        this.loading = false;
      });
    },
    editEnter(e) {
      console.log(e, "DDDDDDDDDDDDDDDD");
      if (e.id) {
        updateCaseManagement(e).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.editVisible = false;
          this.getList();
        });
      } else {
        addCaseManagement(e).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.editVisible = false;
          this.getList();
        });
      }
    },
    editClose() {
      this.editVisible = false;
    },
    handleUpdate(e) {
      this.isEdit = true;
      this.editData = {
        is_bidder: 0,
        is_repair: 0,
      };
      this.editData = { ...e };
      this.$refs.editRef.editType = true;
      this.editVisible = true;
    },
    handleDelete(e) {
      this.$modal
        .confirm('是否确认删除案件号为"' + e.case_number + '"的数据项？')
        .then(function () {
          return deleteCaseManagement({ id: e.id,case_number:e.case_number });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style></style>
